<template>
	<div class="page404">
		<div>
			<svg-icon name="404" width="300" height="300"></svg-icon>
		</div>
		<div class="part2">
			<!-- <h1>404</h1> -->
			<h3>UH OH! 页面丢失</h3>
			<p>您所寻找的页面不存在。你可以点击下面的按钮返回主页。</p>
			<el-button plain @click="backIndex">返回首页</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
let $router = useRouter();
const backIndex = async () => {
	$router.push({path:'/'});
}
</script>

<style scoped lang="scss">
.page404{ width: 600px; height: 300px; text-align: center; position: fixed; top: 50%; left: 50%; margin-left: -300px; margin-top: -150px; display: flex; align-items: center;}
.part2{ text-align: left; padding-left: 20px;}
h1{ font-size: 106px; margin-bottom: 10px; font-family: Arial;}
h3{ font-size: 22px; margin-bottom: 10px;}
p{ font-size: 13px; margin-bottom: 20px; line-height: 20px;}
</style>
